/* 学习目标：React路由的基本使用  */

// 1. 下包 npm i react-router-dom
// 2. 导入4个组件： HashRouter Routes Route Link
import { HashRouter, Routes, Route, Link } from 'react-router-dom';

import React from 'react';
import Find from './components/Find';
import Home from './components/Home';
import My from './components/My';
import Friend from './components/Friend';

export default function App() {
  return (
    // 3. 💥💥使用HashRouter包住所有的代码： 负责实例化路由
    <HashRouter>
      <div>
        {/* // 5. 使用LInk组件跳转 */}
        <Link to="/home">点我跳转-首页</Link>
        <br />
        <Link to="/find">点我跳转-发现</Link>
        <br />
        <Link to="/my">点我跳转-我的</Link>
        <br />
        <Link to="/friend">点我跳转-朋友</Link>
        <br />
        {/*  4. 💥💥使用Routes必须包住所有的Route */}
        <Routes>
          {/* Route设置路由规则 和 挂载点 💥💥 element接收的是一个组件标签写法，  */}
          <Route path="/home" element={<Home />} />
          <Route path="/find" element={<Find />} />
          <Route path="/my" element={<My />} />
          <Route path="/friend" element={<Friend />} />
        </Routes>
      </div>
    </HashRouter>
  );
}
